<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <div class="title-area">
      <div>
        <span>{{ deptName }}-{{ year }}年用能统计</span>
      </div>
      <div>
        <el-button type="warning" plain size="small" @click="handleExport">
          导出
        </el-button>
        <el-button size="small" @click="handlerGoback"> 返回 </el-button>
      </div>
    </div>
    <el-descriptions direction="vertical" :column="12" border>
      <el-descriptions-item
        v-for="(item, index) in tagArr"
        :key="index"
        :type="item.type"
        :label="item.label"
      >
        {{ item.value }}{{ item.unit }}
      </el-descriptions-item>
      >
    </el-descriptions>
    <el-table
      class="mt10"
      ref="excelTable"
      :data="tableData.data"
      border
      :height="660"
      background
    >
      <el-table-column
        label="能耗名称"
        prop="name"
        min-width="200"
        showOverflowTooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="计量单位"
        prop="unit"
        min-width="100"
        showOverflowTooltip
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="1月"
        prop="field0"
        min-width="100"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="2月"
        prop="field1"
        min-width="100"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="3月"
        prop="field2"
        min-width="100"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="一季度"
        prop="field3"
        align="center"
        min-width="100"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="4月"
        prop="field4"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="5月"
        prop="field5"
        min-width="100"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="6月"
        prop="field6"
        min-width="100"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="二季度"
        prop="field7"
        min-width="100"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="半年"
        prop="field8"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="7月"
        prop="field9"
        align="center"
        min-width="100"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="8月"
        prop="field10"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="9月"
        prop="field11"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="三季度"
        prop="field12"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="10月"
        prop="field13"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="11月"
        prop="field14"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="12月"
        prop="field15"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="四季度"
        prop="field16"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
      <el-table-column
        label="全年"
        prop="field17"
        min-width="130"
        align="center"
        showOverflowTooltip
      >
      </el-table-column>
    </el-table>
  </lb-layout>
</template>

  <script>
import tableConst from "@/views/statistics/unit/tableConst.js";
import { exportExcel } from "@/utils/xlsx";
import { getDeptStatisticsEnergyDetail } from "@/api/statistics/unit.js";
import { deepClone, dealElectricity } from "@/utils/index";
export default {
  name: "unitDeail",
  components: {},
  data() {
    return {
      tagArr: [
        {
          label: "房间数量",
          value: 0,
          unit: "个",
          type: "success",
        },
        {
          label: "用能面积",
          value: 0,
          unit: "㎡",
          type: "success",
        },
        {
          label: "用能人数",
          value: 0,
          unit: "人",
          type: "success",
        },
        {
          label: "人均电耗",
          value: 0,
          unit: "kwh",
          type: "danger",
        },
        {
          label: "人均水耗",
          value: 0,
          unit: "t",
          type: "danger",
        },
        // {
        //   label: "人均碳排",
        //   value: 0,
        //   unit: "kgCO2",
        //   type: "danger",
        // },
        {
          label: "公摊用电",
          value: 0,
          unit: "kwh",
          type: "danger",
        },
        {
          label: "公摊用水",
          value: 0,
          unit: "t",
          type: "danger",
        },
        {
          label: "总预算",
          value: 0,
          unit: "元",
          type: "warning",
        },
        {
          label: "剩余",
          value: 0,
          unit: "元",
          type: "warning",
        },
        // {
        //   label: "评价等级",
        //   value: 0,
        //   unit: "分",
        //   type: "warning",
        // },
      ],
      year: "",
      deptName: "",
      deptId: null,
      tableData: {
        data: [],
      },
    };
  },
  mounted() {
    this.handlerSearchDetail();
  },
  methods: {
    handleExport() {
      if (this.tableData.data.length <= 0) {
        this.$message.warning("无内容导出,请确认!");
        return false;
      }
      let fileName = this.deptName + "-" + this.year + "年用能统计";
      let cols = [{ wpx: 240 }];
      exportExcel(this.$refs.excelTable, fileName, cols);
    },
    async initData(data) {
      let that = this;
      let query = {
        ...data,
      };
      that.$store.commit("app/updateApiCount", "add");
      await getDeptStatisticsEnergyDetail(query)
        .then((res) => {
          that.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          that.requestTotal(res?.data?.deptEnergyConsumptionHeadOfYearDetailVO);
          let newData = res?.data?.deptEnergyStatisticFormDetailDataVOS ?? [];
          let arr = tableConst.tableData;
          if (newData.length > 0) {
            newData.map((it, i) => {
              for (let key in it) {
                arr.map((item) => {
                  if (item.fields == key) {
                    if (item.fields == "userNum") {
                      item["field" + i] = String(it[key]);
                    } else {
                      item["field" + i] = dealElectricity(it[key], 1, 2);
                    }
                  }
                  return item;
                });
              }
              return it;
            });
          }
          that.tableData.data = arr;
        })
        .catch((err) => {
          that.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    requestTotal(result) {
      this.tagArr[0].value = result?.roomNum ?? 0;
      this.tagArr[1].value = result?.roomArea ?? 0;
      this.tagArr[2].value = result?.userNum ?? 0;
      let totalElectric = result?.perCapitaElectricConsumption ?? 0;
      let totalWater = result?.perCapitaWaterConsumption ?? 0;
      let totalCarbon = result?.perCapitaCarbonEmissions ?? 0;
      let ele, water, car;
      if (result) {
        ele = dealElectricity(totalElectric / 1, 1, 2);
        water = dealElectricity(totalWater / 1, 1, 2);
        car = dealElectricity(totalCarbon / 1, 1, 2);
      } else {
        ele = "0.00";
        water = "0.00";
        car = "0.00";
      }
      this.tagArr[3].value = ele;
      this.tagArr[4].value = water;
      //this.tagArr[5].value = car;
      this.tagArr[5].value = dealElectricity(
        result?.publicShareElectricConsumption,
        1,
        2
      );
      this.tagArr[6].value = dealElectricity(
        result?.publicShareWaterConsumption,
        1,
        2
      );
      let budgetFund = result?.budgetFund ?? 0;
      let balanceFund = result?.balanceFund ?? 0;
      this.tagArr[7].value = dealElectricity(budgetFund, 1, 2);
      this.tagArr[8].value = dealElectricity(balanceFund, 1, 2);
      // this.tagArr[10].value = result.score.toFixed(0);
    },
    // 搜索
    handlerSearchDetail() {
      // console.log(this.$route.query, "路由参数");
      let query = this.$route.query;
      this.deptId = query.deptId;
      this.year = query.year;
      this.deptName = query.deptName;
      const data = {
        deptId: this.deptId,
        year: this.year,
      };
      this.initData(data);
    },
    handlerGoback() {
      if (this.$route.query.overYear == 1) {
        this.$router
          .push({ path: "/work/departmental", query: { overYear: 1 } })
          .catch(() => {});
      } else {
        this.$router.go(-1);
      }
    },
  },
};
</script>

  <style lang="scss" scoped>
.title-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  span {
    font-size: 24px;
    font-weight: 400;
  }
}
.tag-area {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .el-tag {
    margin-right: 10px;
  }
}
::v-deep .el-descriptions-item__cell {
  text-align: center !important;
}
</style>
